<template>
<div class="register">

    <div class="container">
        <van-form ref="vanForm" class="form" :show-error-message="false" :show-error="true">
			<van-field
			    v-model="form.pid"
			    name="推荐码"
			    placeholder="请输入推荐码"
			    v-show="false"
			/>
            <van-field
                v-model="form.ltd"
                name="ltd"
                placeholder="请输入您的真实公司名称"
                :rules="[{ required: true, message: '请输入您的真实公司名称' }]"
            />
            <van-field
                v-model="form.name"
                name="name"
                placeholder="请输入您的真实姓名"
                :rules="[{ required: true, message: '请输入您的真实姓名' }]"
            />
            <van-field
                v-model="form.password"
                type="password"
                name="password"
                placeholder="请输入您的密码"
                :rules="[{ required: true, message: '请填写您的密码' }, { pattern: /^[0-9A-Za-z]{4,16}$/, message: '用户名 只支持字母、数字' }]"
            />
            <van-field
                v-model="form.repassword"
                type="password"
                name="repassword"
                placeholder="请确认密码"
                :rules="[{ required: true, message: '请再次填写您的密码' }]"
            />
            <van-field
                v-model="form.phone"
                name="phone"
                placeholder="请输入手机号"
                :rules="[{ required: true, message: '请填写您的手机号' }]"
            />
            <van-field
                v-model="form.verify"
                name="验证码"
                placeholder="请输入验证码"
                :rules="[{ required: true, message: '请填写手机验证码' }]"
            >
			
			
               <template #button>
                    <van-button native-type="button" size="small" type="primary" :disabled="time !== 0" @click="sendCode">
                        {{ time !== 0 ? `${time}秒后重新发送` : '发送验证码' }}
                    </van-button>
                </template>
            </van-field>
            <div class="agreement flex-center">
                <van-checkbox class="checkbox" icon-size="15px" :value="true" style=" pointer-events: none;" >注册即代表同意</van-checkbox>
                <div>
                    <a href="javascript:;" @click="type = 'userProtocol';show = true">《易闪购服务协议》</a> <br/>
                    <a href="javascript:;" @click="type = 'fw';show = true">《易闪购商城隐私协议》</a>
                </div>
            </div>
            <div style="margin: 16px;">
                <van-button round block type="danger" native-type="button" @click="onSubmit">立即注册</van-button>
            </div>
        </van-form>
    </div>

    <!-- 协议 -->
    <van-popup v-model="show" position="bottom" :style="{ height: '70%' }" @open="getDeal" closeable>
        <div v-html="content" class="p15"> </div>
    </van-popup>
</div>
</template>

<script>
export default {
    data () {
        return {
            form: {
                // company: '',
                // name: '',
                // nickname: '',
                // phone: '',
                // pass: '',
                // code: '',
                // check: true,
				pid: 0,
                ltd: '',
                name: '',
                password: '',
                repassword: '',
                phone: '',
                // code: '1234',
                verify: ''
            },
            phone: [
                { required: true, message: '请填写用户名' },
                { pattern: /^1[23456789]\d{9}$/, message: '请输入正确的手机号格式' }
            ],
            time: 0,
            show: false,
            type: 'userProtocol',
            content: ''
        }
    },
	created: function() {
		
		this.form.pid=this.$route.query.pid
		
	},
    methods: {
        onSubmit () {
            this.$refs.vanForm.validate().then(res => {
				//  console.log(this.form)
				 this.$user.userRegister(this.form).then((res) => {
				 	// const data = res.data||{}
                    this.$toast('注册成功')
				 	this.$router.push('/user')
				 	
				 })
            })
            .catch (error => {
                // console.log(error)
                error[0].message && this.$toast(error[0].message)
            })
        },
        async sendCode () {
            try {
                if (this.time !== 0) return
                await this.$refs.vanForm.validate('phone')
                this.$user.getSendSms(this.form.phone, '0')
                setTimeout(() => {
                    this.$toast.success('验证码已发送')
                })
                this.time = 60
                let time = setInterval(() => {
                    this.time --
                    if (this.time <= 0) {
                        clearInterval(time)
                        this.time = 0
                    }
                }, 1000)
            } catch (err) {
                console.log(err)
            }
        },
        getDeal () {
            this.$home.getHomeData(this.type).then(res => {
                this.content = res.data[this.type]
            })
        }
    }
}
</script>

<style lang="less" scoped>
.register {
    height: 100%;
    background-color: #fafafa;
    .form {
        padding-top: 20px;
    }
    .agreement {
        height: 50px;
        font-size: 12px;
        .checkbox {
            // display: inline-block;
        }
        a {
            color: @priceColor;
            margin-left: 4px;
        }
    }
}
</style>
